<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=0">
    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="author" content="">
    <title>假日国际</title>

    <link rel="stylesheet" href="css/idangerous.swiper.css">
    <link rel="stylesheet" href="css/demo.css">
    <link rel="stylesheet" href="css/lightbox.css">
    <link rel="stylesheet" href="css/css-reset.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/media.css">

    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/lightbox.js"></script>
    <script src="js/idangerous.swiper.min.js"></script>
    <script src="js/basic.js"></script>



    <!--[if IE]><link rel="stylesheet" href="css/ie.css"><![endif]-->

    <!--[if lt IE 9]><script src="js/html5.js" ></script><![endif]-->
    <!--[if lt IE 9]><script src="js/selectivizr-min.js" ></script><![endif]-->


</head>

<body>




<!--头部-->
<header></header>




<div class="ibn">
    <div class="ibn-pc">
        <div class="ibn-bg"></div>
        <div class="ibn-light"></div>


        <div class="banner-star">
            <div class="ibn-light-star"></div>
            <div class="ibn-star ibn-star1"></div>
            <div class="ibn-star ibn-star2"></div>
            <div class="ibn-star ibn-star3"></div>
            <div class="ibn-star ibn-star4"></div>

            <div class="ibn-star ibn-star5"></div>
            <div class="ibn-star ibn-star6"></div>


            <div class="ibn-star ibn-star7"></div>
            <div class="ibn-star ibn-star8"></div>
            <div class="ibn-star ibn-star9"></div>
            <div class="ibn-star ibn-star10"></div>
            <div class="ibn-star ibn-star11"></div>
            <div class="ibn-star ibn-star12"></div>
        </div>


        <div class="ibn-p1">
            <p><span>深</span><span>圳</span><span>市</span><span>假</span><span>日</span><span>國</span><span>際</span><span>文</span><span>旅</span><span>發</span><span>展</span><span>集</span><span>團</span></p>
        </div>

        <div class="ibn-p2">
            <div class="ibnp-top">
                <div><img src="images/ipt1.png" alt=""><div style="display: inline-block;" class="anim-text">文旅集团</div></div>
            </div>
            <div class="ibnp-mid">
                <div class="anim-text1">旅游全产业链运营商</div>
            </div>
            <div class="ibnp-bot">
                <div class="anim-text2">旅游投资•国际旅行•景区规划•景区管理•主题景区建设</div>
            </div>
        </div>
    </div>


    <div class="ibn-mobile">
        <div class="ibn-mobile-p1">
            <img src="images/ibn-mobile-p1.png" alt="">
        </div>
        <div class="ibn-mobile-p2">
            <img src="images/ibn-mobile-p2.png" alt="">
        </div>
        <div class="ibn-mobile-p3">
            <img src="images/ibn-mobile-p3.png" alt="">
        </div>


    </div>



</div>


<script>
    if (window.navigator.userAgent.indexOf('compatible') != -1) {
        //alert('360兼容模式');
        $('.ibn').css("background","url(images/index-banner-ie.jpg)");
    }
</script>


<div id="controls" style="display: none;">
    <select name="selectEffect" id="selectEffect" class="control">
        <option value="fade">Fade in</option>
        <option value="slide">Slide in</option>
        <option value="roll">Roll in</option>
        <option value="hop">Hop in</option>
        <option value="converge">Converge</option>
        <option value="spiral">Spiral</option>
        <option value="snow">Snow</option>
        <option value="meteorite">Meteorite</option>
        <option value="bounce">Bounce</option>
        <option value="peel">Peel</option>
        <option value="swivel">Swivel</option>
        <option value="float">Float</option>
        <option value="bubble">Bubble</option>
    </select>
    <div>
        <button class="btn animate">Animate</button>
    </div>
</div>




<!--文字效果js-->
<script>
    $(function () {
        'use strict';


        const util = {
            math: {
                degToRad: alpha => alpha * Math.PI / 180,

            polarToDecart: (alpha, r) => {
            alpha = this.degToRad(alpha);
        return {x: r * Math.cos(alpha), y: r * Math.sin(alpha)};
    }
    },

        color: {
            random: (opts = {}) => {
                let h, s, l;

                h = opts.hue || Math.floor(Math.random() * 360);
                s = opts.saturation || Math.floor(Math.random() * 101);
                l = opts.lightness || Math.floor(Math.random() * 101);

//            return `hsl(${h}, ${s}%, ${l}%)`; //随机颜色控制
            }
        }
    };




        /**
         * Make a contenteditable element more controllable
         */
        class FunkyLetters {
            /**
             * Constructor
             * @param  {Element} el  document element with contenteditable=true or selector
             * @param  {Object} [opts] options
             */
            constructor(el, opts = {}) {
                if(typeof el == 'string') {
                    el = document.querySelector(el);
                }
                this.container = el;
                this.options = opts;
                this._splitLetters();
                this._listenToInput();
            }


            /**
             * Split container's text into one letter spans optionally colored
             */
            _splitLetters() {
                this.container.innerHTML = FunkyLetters.splitTextLetters(this.container.textContent, this.options);
            }


            /**
             * Split the text into one letter spans
             * @param  {string} text input text
             * @param  {Object} [opts] options
             * @return {string}      html with text split into letters
             */
            static splitTextLetters(text, opts = {}) {
                let letters;

                text = text.replace(/\s+/, ' ');
                letters = text.split(/(?=.)/);

                return letters.reduce((a, b) => a + FunkyLetters.makeLetterHtml(b, opts), '');
            }


            /**
             * Generate html string for a letter
             * @param  {string} letter single letter
             * @param  {Object} [opts]   options
             * @return {string}        html string
             */
            static makeLetterHtml(letter, opts = {}) {
                let style = '',
                    className = 'char';

                if(/\s/.test(letter)) {
                    letter = ' ';
                    className += ' space';
                } else {
                    className += ' letter';
                }
                if(opts.colorize) {
                    style += 'color:' + util.color.random({saturation: 100, lightness: 50}) + ';';
                }

                return `<span class="${className}" ${style && 'style="' + style + '"'}><span class="letter-inner">${letter}</span></span>`;
            }


            /**
             * Watch input
             */
            _listenToInput() {
                let me = this;
                // this.container.dataset.text = this.container.textContent;

                this.container.addEventListener('keydown', function(e) {
                    let letterEl = me.getFocusLetter();

                    if(e.key.length === 1 && !e.altKey && !e.ctrlKey) {
                        e.preventDefault();
                        me.insertText(e.key);
                        return;
                    }

                    // If the container is empty
                    if(!letterEl) return;

                    switch(e.key) {
                        // Firefox focuses in two steps on inline-block elements
                        case 'ArrowRight':
                            if(navigator.userAgent.indexOf('AppleWebKit') !== -1) break;
                            if(!letterEl.nextElementSibling) break;
                            e.preventDefault();
                            me.setFocus(letterEl.nextElementSibling, 1);
                            break;

                        case 'ArrowLeft':
                            if(navigator.userAgent.indexOf('AppleWebKit') !== -1) break;
                            e.preventDefault();
                            if(!letterEl.previousElementSibling) {
                                me.setFocus(letterEl, 0);
                            } else {
                                me.setFocus(letterEl.previousElementSibling, 1);
                            }
                            break;

                        case 'ArrowUp':
                        case 'ArrowDown':
                            e.preventDefault();
                            break;

                        case 'Home':
                        case 'PageUp':
                            e.preventDefault();
                            me.setFocus(this.firstElementChild, 0);
                            break;

                        case 'End':
                        case 'PageDown':
                            e.preventDefault();
                            me.setFocus(this.lastElementChild, 1);
                            break;
                    }
                });

                this.container.addEventListener('input', function(e) {
                    // Firefox leaves empty containers when text is deleted. Make sure those are deleted too.
                    me._cleanEmpty();
                });

                this.container.addEventListener('paste', function(e) {
                    if(e.clipboardData.types.indexOf('text/plain') != -1) {
                        e.preventDefault();
                        me.insertText(e.clipboardData.getData('text/plain'));
                    }
                });
            }

            /**
             * Format text and insert it into the container at the caret position
             * @param  {string} text the text to insert
             */
            insertText(text) {
                let sel = document.getSelection(),
                    range = document.createRange(),
                    node = this.getFocusLetter(),
                    isBeforeNode = sel.focusOffset === 0;

                sel.deleteFromDocument();
                if(!node) {
                    this.container.insertAdjacentHTML('afterbegin', FunkyLetters.splitTextLetters(text, this.options));
                    this.setFocus(Array.from(this.container.querySelectorAll('.char')).pop(), 1);
                } else if(isBeforeNode) {
                    node.insertAdjacentHTML('beforebegin', FunkyLetters.splitTextLetters(text, this.options));
                    this.setFocus(node.previousElementSibling, 1);
                } else {
                    node.insertAdjacentHTML('afterend', FunkyLetters.splitTextLetters(text, this.options));
                    for(let i = text.length; i > 0 && node.nextElementSibling; i--) {
                        node = node.nextElementSibling;
                    }
                    this.setFocus(node, node.textContent.length);
                }

                this.container.dataset.changed = true;
                this._cleanEmpty();
            }

            /**
             * Get the character in focus (at caret position)
             * @return {Element} the element node in focus
             */
            getFocusLetter() {
                const sel = document.getSelection();
                return sel.anchorNode.closest ? sel.anchorNode.closest('.char') : sel.anchorNode.parentElement.closest('.char');
            }

            /**
             * Set cursor position
             * @param {Element} node   letter element to focus on
             * @param {Integer} offset offset. In our case, either 0 or 1
             */
            setFocus(node, offset) {
                const sel = document.getSelection(),
                    range = document.createRange();

                range.setStart(node, offset);
                sel.removeAllRanges();
                sel.addRange(range);
            }

            /**
             * Delete elements other than .char the browser could have generated
             */
            _cleanEmpty() {
                const focusLetter = this.getFocusLetter();
                Array.from(this.container.children).forEach(el => {
                    if(el.classList.contains('char') && el.textContent) return;
                if(el === focusLetter) {
                    if(el.previousElementSibling) {
                        this.setFocus(el, 1);
                    } else if (el.nextElementSibling) {
                        this.setFocus(el.nextElementSibling, 1);
                    }
                }
                el.remove();
            });
            }
        }





        /**
         * Control animations of an element's children
         */
        class Animator {
            /**
             * Constructor
             * @param  {Element|string} el the container element whose children are being animated
             */
            constructor(el) {
                this.container = el;
                this._removeClassTimer = null;

                // this.container.addEventListener('animationend', () => {
                // 	clearTimeout(this._removeClassTimer);
                // 	this._removeClassTimer = setTimeout(() => {
                // 		this.container.classList.remove('anim');
                // 	}, 900);
                // });
            }


            /**
             * Run animation using the effect
             * @param  {string} effect effect name
             */
            animate(effect) {
                const cont = this.container;
                if(cont.classList.contains('anim')) {
                    cont.classList.remove('anim');
                    setTimeout(() => {
                        this.animate(effect);
                }, 50);
                    return;
                }
                clearTimeout(this._removeClassTimer);
                cont.classList.add('anim');
                if(cont.dataset.effect === effect && !('changed' in cont.dataset)) return;
                cont.dataset.effect = effect;
                delete cont.dataset.changed;
                // if(effect !== 'converge'/* && effect !== 'spiral'*/ && effect !== 'meteorite') {
                // 	Array.prototype.forEach.call(cont.children, function(el) {
                // 		el.style.transform = '';
                // 	});
                // }
                if(!Animator.effects[effect]) {
                    throw new Error(`Animator: effect ${effect} is not defined`);
                }
                if(Animator.effects[effect].delays) {
                    this.distributeDelays(Animator.effects[effect].delays);
                } else {
                    this.distributeDelays({shift: false});
                }
            }


            /**
             * Distribute animation delays
             * @param  {Object} opts           options
             * @param  {Object} opts.shift     shift each next item this much milliseconds
             * @param  {Object} [opts.random]  distribute delays randomly: without regard to document order
             * @param  {Object} [opts.reverse] distribute delays in reverse document order starting with the last element
             */
            distributeDelays(opts) {
                let shift = opts.shift != null ? opts.shift : 100,
                    curShift = 0,
                    els = Array.from(this.container.children);

                if(opts.random) {
                    let newEls = [];
                    for(let j = 0, l = els.length; j < l; j++) {
                        let i = Math.floor(Math.random() * els.length);
                        newEls.push(els.splice(i, 1)[0]);
                    }
                    els = newEls;
                }
                if(opts.reverse) {
                    els = els.reverse();
                }

                els.forEach(el => {
                    curShift += typeof shift == 'object' ? Math.round(Math.random() * (shift.max - shift.min) + shift.min) : shift;
                el.style.animationDelay = el.querySelector('.letter-inner').style.animationDelay = '';
                if(shift === false) return;
                el.style.animationDelay = (parseFloat(getComputedStyle(el, null).animationDelay) + curShift/1000) + 's';
                el.querySelector('.letter-inner').style.animationDelay = (parseFloat(getComputedStyle(el.querySelector('.letter-inner'), null).animationDelay) + curShift/1000) + 's';
            });
            }


            /**
             * Distribute children's offset positions
             * We are currently doing this in Sass
             * @param  {Object} opts options
             */
            distributeOffsets(opts) {
                let coords,
                    alpha = opts.minAngle || 0,
                    x = 100,
                    y = 100,
                    els = this.container.children;

                for(let i = 0; i < els.length; i++) {
                    if(opts.dx || opts.dy) {
                        x -= opts.dx || 0;
                        y -= opts.dy || 0;
                    } else {
                        if(opts.random) {
                            alpha = Math.random * (opts.maxAngle || 360 - opts.minAngle || 0) + opts.minAngle || 0;
                            coords = util.math.polarToDecart(alpha, 100);
                        } else {
                            coords = util.math.polarToDecart(alpha, 100);
                            alpha += opts.dAlpha;
                        }
                        x = coords.x;
                        y = coords.y;
                    }
                    els[i].style.transform = 'translate(' + x.toFixed(3) + 'vmax,' + y.toFixed(3) +'vmax)';
                }
            }
        }
        /**
         * The available animation effects and their settings
         * @type {Object}
         */
        Animator.effects = {
            roll: {
                delays: {shift: 100}
            },
            slide: {
                delays: {shift: 100}
            },
            swivel: {
                delays: {shift: 100, random: true}
            },
            peel: {
                delays: {shift: 70}
            },
            wave: {
                delays: {shift: 30}
            },
            wave2: {
                delays: {shift: 120}
            },
            hop: {
                delays: {shift: 140}
            },
            converge: {
                delays: {shift: false}
            },
            fade: {
                delays: {shift: 80, random: true}
            },
            snow: {
                delays: {shift: 600, random: true}
            },
            spiral: {
                delays: {shift: 100}
            },
            meteorite: {
                delays: {shift: 50, random: true}
            },
            bounce: {
                delays: {shift: 200, random: true}
            },
            float: {
                delays: {shift: 400, random: true}
            },
            bubble: {
                delays: {shift: {min: 200, max: 500}, random: true}
            },
        };




        //1



        let config = localStorage['funkyLetters:config'];
        try {
            config = JSON.parse(config);
        } catch(e) {
            config = {
                completed: {}
            };
        }

        // Tips
        //    if(config.completed.changeEffect) {
        //        document.querySelector('.tip-effect').classList.add('hide');
        //    } else {
        //        document.querySelector('#selectEffect').addEventListener('change', () => {
        //            document.querySelector('.tip-effect').classList.add('hide');
        //        config.completed.changeEffect = true;
        //        localStorage['funkyLetters:config'] = JSON.stringify(config);
        //    }, {once: true});
        //    }
        //
        //    if(config.completed.type) {
        //        document.querySelector('.tip-type').classList.add('hide');
        //    } else {
        //        animationContainer.addEventListener('keydown', () => {
        //            document.querySelector('.tip-type').classList.add('hide');
        //        config.completed.type = true;
        //        localStorage['funkyLetters:config'] = JSON.stringify(config);
        //    }, {once: true});
        //    }
        //
        //    if(config.completed.comeBack) {
        //        document.querySelector('.alert-come-back').classList.add('hide');
        //    }


        //2




        // Listen to controls
        document.querySelector('#selectEffect').addEventListener('change', function(e) {
            animator.animate(this.value);
        });
        document.querySelector('.animate').addEventListener('click', function(e) {
            animator.animate(document.querySelector('#selectEffect').value);
        });


        // Animate on enter key
        //    animationContainer.addEventListener('keydown', function(e) {
        //        switch(e.keyCode) {
        //            case 13:
        //                e.preventDefault();
        //                document.querySelector('.animate').focus();
        //                document.querySelector('.animate').click();
        //                break;
        //        }
        //    });




        // Other
        //    document.querySelector('.dismiss').addEventListener('click', function(e) {
        //        this.closest('.alert').classList.add('close');
        //        config.completed.comeBack = true;
        //        localStorage['funkyLetters:config'] = JSON.stringify(config);
        //    });


        //封装的添加类函数
        function bannerShow() {
            setTimeout(function () {
                $('.ibnp-top img').addClass('on');
            },4500);

            $('.ibn-star').addClass('on');
            $('.ibn-light').addClass('on');
            $('.ibn-light-star').addClass('on');
            $('.ibn-p1 span').addClass('on');


            //1
            const animationContainer = document.querySelector('.anim-text');
            const animationContainer1 = document.querySelector('.anim-text1');
            const animationContainer2 = document.querySelector('.anim-text2');



            //2
            new FunkyLetters(animationContainer, {colorize: true});
            new FunkyLetters(animationContainer1, {colorize: true});
            new FunkyLetters(animationContainer2, {colorize: true});

            const animator = new Animator(animationContainer);
            const animator1 = new Animator(animationContainer1);
            const animator2 = new Animator(animationContainer2);
            //    animator.animate(document.querySelector('#selectEffect').value);
            setTimeout(function () {
                $('.anim-text').addClass('on');
                animator.animate("converge");
            },4000)
            setTimeout(function () {
                $('.anim-text1').addClass('on');
                animator1.animate("peel");
            },4500);
            setTimeout(function () {
                $('.anim-text2').addClass('on');
                animator2.animate("fade");
            },6000);

        }



        //当背景图加载成功后才执行效果
        $('<img/>').attr('src', 'images/index-banner-on.jpg').load(function() {
            $(this).remove(); //移除动态创建的元素
            //alert(1);
            bannerShow();
        });


    })



</script>


<div class="index-about clearfix">
    <div class="index-about-left">
        <div class="ia-left-content clearfix">
            <div class="ia-box">
                <h4><span class="timer count-title" data-to="1280" data-speed="1500"></span></h4>
                <p>合作客户</p>
            </div>
            <div class="ia-box">
                <h4><span class="timer count-title" data-to="24" data-speed="1500"></span><em>HOUR</em></h4>
                <p>快速响应</p>
            </div>
            <div class="ia-box">
                <h4><span class="timer count-title" data-to="10" data-speed="1500"></span><em>YEAR</em></h4>
                <p>行业经验</p>
            </div>
        </div>
    </div>

    <div class="index-about-right">
        <div class="ia-right-content">
            <div class="iar-title anim anim1">
                <div class="iar-title-en">ABOUT US</div>
                <h3>关于我们</h3>
                <div class="iar-title-line"></div>
            </div>
            <div class="iar-p anim anim2">
                深圳市假日国际文旅集团（下称“集团”）成立于二OO六年，旗下有成熟的国际旅行社、旅游景区设计院、旅游管理公司及投资公司。集团秉持“和谐善筑”的价值观，通过『三全形态』全流程体验 ▪ 全功能满足 ▪ 全领域覆盖 运营机制，以投资、策划、设计、建设、运营、管理等...
            </div>
            <div class="iar-more anim anim3">
                <a href="about.html">MORE</a>
            </div>
        </div>
    </div>
</div>


<div class="index-intro">

    <div class="index-title anim anim1">
        <h3>PROJECT INTRODUCTION</h3>
        <p>项目介绍</p>
    </div>

    <div class="index-intro-content anim anim2">

        <!--1.19删除此背景图-->
        <!--<div class="iic-bg"></div>-->

        <div class="iic-bc">
            <div class="iic-list">

                <!--1.19此处新增背景图-->
                <div class="iic-bg"></div>

                <div class="iic-list-p">
                    <div class="wrap">
                        <h4>杭州琵琶湾生态乐园</h4>
                        <p>杭州琵琶湾生态乐园位于浙江杭州千年古镇塘栖，距杭州市中心约30公里，项目以“全功能满足，全领域覆盖”为规划理念，
                            <br>
                            精心打造2500余亩的大型旅游综合体，预计总投资近20亿人民币</p>
                    </div>
                </div>
            </div>
            <div class="iic-list">

                <!--1.19此处新增背景图-->
                <div class="iic-bg"></div>

                <div class="iic-list-p">
                    <div class="wrap">
                        <h4>杭州琵琶湾生态乐园</h4>
                        <p>杭州琵琶湾生态乐园位于浙江杭州千年古镇塘栖，距杭州市中心约30公里，项目以“全功能满足，全领域覆盖”为规划理念，
                            <br>
                            精心打造2500余亩的大型旅游综合体，预计总投资近20亿人民币</p>
                    </div>
                </div>
            </div>
            <div class="iic-list">

                <!--1.19此处新增背景图-->
                <div class="iic-bg"></div>

                <div class="iic-list-p">
                    <div class="wrap">
                        <h4>杭州琵琶湾生态乐园</h4>
                        <p>杭州琵琶湾生态乐园位于浙江杭州千年古镇塘栖，距杭州市中心约30公里，项目以“全功能满足，全领域覆盖”为规划理念，
                            <br>
                            精心打造2500余亩的大型旅游综合体，预计总投资近20亿人民币</p>
                    </div>
                </div>
            </div>
            <div class="iic-list">

                <!--1.19此处新增背景图-->
                <div class="iic-bg"></div>

                <div class="iic-list-p">
                    <div class="wrap">
                        <h4>杭州琵琶湾生态乐园</h4>
                        <p>杭州琵琶湾生态乐园位于浙江杭州千年古镇塘栖，距杭州市中心约30公里，项目以“全功能满足，全领域覆盖”为规划理念，
                            <br>
                            精心打造2500余亩的大型旅游综合体，预计总投资近20亿人民币</p>
                    </div>
                </div>
            </div>

        </div>

        <div class="iic-type">
            <div class="wrap">
                <div class="iic-type-content clearfix">
                    <div class="iic-type-box iic-type-box1">
                        <div class="iic-type-box-icon"></div>
                        <p>经典案例</p>
                    </div>
                    <div class="iic-type-box iic-type-box2">
                        <div class="iic-type-box-icon"></div>
                        <p>旅游定制</p>
                    </div>
                    <div class="iic-type-box iic-type-box3">
                        <div class="iic-type-box-icon"></div>
                        <p>旅行社</p>
                    </div>
                    <div class="iic-type-box iic-type-box4">
                        <div class="iic-type-box-icon"></div>
                        <p>主题景区</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="index-news">

    <div class="wrap">
        <div class="index-title anim anim1">
            <h3>NEWS CENTER</h3>
            <p>新闻中心</p>
        </div>

        <div class="index-news-content clearfix">
            <div class="in-box anim anim2">
                <a href="news-detail.html">
                    <div class="in-box-img">
                        <img src="images/in-img1.jpg" alt="">
                    </div>
                    <div class="in-box-con">
                        <div class="in-box-title clearfix">
                            <div class="in-box-title-left">
                                <h4>深圳市假日国际旅游管理</h4>
                                <i></i>
                            </div>
                            <div class="in-box-title-right">2017-10-18</div>
                        </div>
                        <div class="in-box-p">
                            杭州琵琶湾生态乐园位于浙江杭州千年古镇塘栖，距杭州市中心约30公里，项目以“全功能满足....
                        </div>
                        <div class="in-box-more">MORE</div>
                    </div>
                </a>
            </div>

            <div class="in-box anim anim2">
                <a href="news-detail.html">
                    <div class="in-box-img">
                        <img src="images/in-img2.jpg" alt="">
                    </div>
                    <div class="in-box-con">
                        <div class="in-box-title clearfix">
                            <div class="in-box-title-left">
                                <h4>深圳市假日国际旅游管理</h4>
                                <i></i>
                            </div>
                            <div class="in-box-title-right">2017-10-18</div>
                        </div>
                        <div class="in-box-p">
                            杭州琵琶湾生态乐园位于浙江杭州千年古镇塘栖，距杭州市中心约30公里，项目以“全功能满足....
                        </div>
                        <div class="in-box-more">MORE</div>
                    </div>
                </a>
            </div>

            <div class="in-box anim anim2">
                <a href="news-detail.html">
                    <div class="in-box-img">
                        <img src="images/in-img3.jpg" alt="">
                    </div>
                    <div class="in-box-con">
                        <div class="in-box-title clearfix">
                            <div class="in-box-title-left">
                                <h4>深圳市假日国际旅游管理</h4>
                                <i></i>
                            </div>
                            <div class="in-box-title-right">2017-10-18</div>
                        </div>
                        <div class="in-box-p">
                            杭州琵琶湾生态乐园位于浙江杭州千年古镇塘栖，距杭州市中心约30公里，项目以“全功能满足....
                        </div>
                        <div class="in-box-more">MORE</div>
                    </div>
                </a>
            </div>
        </div>

    </div>

</div>



<!--底部-->
<footer></footer>




<script>



    $(function () {




        //滚动监控添加动画
        var anim = $(".anim");//触发遍历所用的类
        setTimeout(function(){
            $(window).scroll(function() {
                roll();
            })
            $(window).resize(function() {
                roll();
            })
            roll();
        },6)
        function roll() {
            var oHeight = $(window).height();
            var ScrVal = $(window).scrollTop();
            anim.each(function(i) {
                if (ScrVal + oHeight > anim.eq(i).offset().top - 50 ){
                    anim.eq(i).addClass("anim-show");
                }
            })
        }



        //数字滚动效果
        var mark = true;//通过变量，使JS只加载一次
        function numScroll() {
            var d = 80;
            var h = $(window).height();
            var topH = $(document).scrollTop();

            var adv_h1 = $('.ia-box').offset().top;
            //console.log( h + topH - adv_h1  );//元素距离可视窗口底部的距离

            if (h + topH - adv_h1 > d && mark ) {
                $.getScript("js/number-add.js",function () {
                    mark = false;
                    //console.log(mark);
                });
            }
            //console.log(mark);
        }
        //执行滚动监控
        numScroll();
        $(window).scroll(function () {
            numScroll();
        });
        $(window).resize(function () {
            numScroll();
        });



        //项目介绍切换
        $('.iic-bc .iic-list').eq(0).show();
        $('.iic-type-content .iic-type-box').eq(0).addClass('on');
        $('.iic-type-box').click(function () {
            var index=$(this).index();

            $('.iic-type-box').removeClass('on');
            $(this).addClass('on');

            $('.iic-list').hide();
            $('.iic-bc .iic-list').eq(index).fadeIn();

        })

    })


</script>



</body>
</html>

